<template>
  <view class="SummaryAnalysisDetail">
    <div class="header">
      <div class="title">
        {{ title }}
      </div>

      <div ref="typing" class="up_time">
        <!-- 更新于{{ new Date().toLocaleDateString() }} -->
      </div>
    </div>

    <div class="container">
      <div v-if="type === 'pm'">
        <Summary-Analysis-Table
          style="padding-bottom: 10px;"
          :colunnms="proMoneyRanking.colunnms"
          :table-data="proMoneyRanking.data"
          :table-height="containerHeight"
          can-back-top
        />
        <u-loadmore v-if="!loading" class="no_more" style="padding-bottom: 10px;" status="nomore" />
      </div>

      <div v-if="type === 'zxl'">
        <Summary-Analysis-Detail-Cell :list="rateRanking.data" />
      </div>

    </div>

    <auiLoading
      ref="auiLoading"
      :msg="loadingText"
      :type="1"
      mask
    />
  </view>
</template>

<script>
import SummaryAnalysisDetailCell from 'pages/summaryAnalysis/componetns/SummaryAnalysisDetailCell';
import SummaryAnalysisTable from 'pages/summaryAnalysis/componetns/SummaryAnalysisTable';
import { queryBodyByProduce } from '@/api/formview/index.js';
import { getPropertyOfQuery } from '@/pages/formView/index.js';
import auiLoading from 'components/aui-loading/aui-loading';

const typing = function(container, str) {
  let i = 0;
  const tySplit = function(container, str) {
    if (i <= str.length) {
      const s = str.slice(0, i++) + '_';
      container.textContent = s;
      setTimeout(() => {
        tySplit(container, str);
      }, 300);
    } else {
      container.textContent = str;
    }
  };

  tySplit(container, str);
};
export default {
  name: 'SummaryAnalysisDetail',

  components: {
    SummaryAnalysisTable,
    SummaryAnalysisDetailCell,
    auiLoading
  },

  data() {
    return {
      type: '',
      title: '',
      loadingText: '请求数据中...',
      loading: true,
      containerHeight: 0,
      rateRanking: {
        data: []
      },
      proMoneyRanking: {
        data: [],
        colunnms: [
          {
            title: '排名',
            dataIndex: 'myRate'
          },
          {
            title: '项目名称',
            dataIndex: 'myName',
            ellipse: true
          },
          {
            title: '总预算',
            dataIndex: 'myYs'
          },
          {
            title: '拨付金额',
            dataIndex: 'myBf'
          }
        ]
      }
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      const {
        type,
        filter
      } = this.$route.query;
      /*
      pm 各项目资金排名
      zxl 镇执行率排名
    */
      const filter1 = getPropertyOfQuery(filter);

      const filterList = filter1 && Object.keys(filter1).map(
        key => {
          return {
            col: key,
            value: filter1[key]
          };
        }
      ) || [];

      this.type = type;
      const {
        windowHeight
      } = uni.getSystemInfoSync();

      this.containerHeight = windowHeight;

      switch (type) {
        case 'pm':
          this.getProMoneyRanking({ filterList });
          this.title = '各项目资金排名';
          break;

        case 'zxl':
          this.title = '镇执行率排名';
          this.getRateRanking({ filterList });
          break;

        default:
          this.title = '';
          break;
      }
    },

    openLoading() {
      this.loading = true;
      this.loadingText = '请求数据中...';
      this.$nextTick(() => {
        this.$refs.auiLoading.show();
      });
    },

    closeLoading(status) {
      this.loadingText = status ? '请求成功' : '请求失败';
      setTimeout(() => {
        this.loading = false;
        this.$refs.auiLoading.hide();
        typing(this.$refs.typing, `更新于${new Date().toLocaleDateString()}`);
      }, 800);
    },

    // 镇执行率排名
    getRateRanking() {
      this.openLoading();
      queryBodyByProduce({ 'tableId': 531, 'doNotAddOtherFilter': true }).then(res => {
        this.closeLoading(res.success);
        const reg = /[0-9\.]/g;
        const data = res.data;
        if (Array.isArray(data) && data.length) {
          this.rateRanking.data = data.map(item => {
            const ZXL = item.ZXL;
            return {
              ...item,
              name: item.CENTERPRISENAME1,
              value: ZXL ? ZXL.match(reg).join('') * 1 : ''
            };
          });
        }
      });
    },

    // 各项目资金排名
    getProMoneyRanking({ filterList }) {
      this.openLoading();
      queryBodyByProduce(
        {
          'pageIndex': 0,
          'pageSize': 9999,
          'pageType': 1,
          'tableId': 536,
          filterList
        }
      ).then(res => {
        this.closeLoading(res.success);
        const data = res.data;

        if (Array.isArray(data) && data.length) {
          this.proMoneyRanking.data = data.map((item, i) => {
            return {
              ...item,
              myName: item.CPROGRAMNAME,
              myRate: i + 1,
              myYs: item.YSS,
              myBf: item.ZZFS,
              myZXL: item.ZXL
            };
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.SummaryAnalysisDetail {
  $pad: 12px;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #F5F7FA;

  .header {
    height: 100px;
    position: relative;
    background-image: url('~static/img/summaryAnalysis/head-bg.png');
    background-size: 100% 100%;
    padding: $pad;
    color: #ffffff;
    .title {
      font-size: 24px;
    }

    .up_time {
      position: absolute;
      bottom: 20px;
      right: $pad;
      font-size: 12px;
      opacity: .7;
    }
  }

  .container {
    margin-top: 10px;
  }
}

</style>
